<template>
  <div class="home-container">
    <!-- 天气卡片 -->
    <!-- <transition name="fade">
      <div class="weather-card" v-if="weatherData">
        <div class="weather-content">
          <span class="icon">🌞</span>
          <div class="weather-info">
            <h3>{{ weatherData.city }}</h3>
            <p>{{ weatherData.temperature }}°C | {{ weatherData.condition }}</p>
          </div>
        </div>
      </div>
    </transition> -->

    <!-- 主内容区 -->
    <main class="main-content">
      <!-- 问候语 -->
      <transition name="slide-up">
        <h1 class="greeting">你好，智慧的法务官!</h1>
      </transition>

      <!-- 轮播图 -->
      <div class="slider-container">
        <transition-group name="slide-fade" tag="div" class="slider-wrapper">
          <!-- 包裹图片的div容器 -->
          <div
            v-for="(img, index) in images"
            :key="index"
            class="slide-item"
            :class="{ active: currentIndex === index }"
          >
            <img
              :src="img.url"
              alt="广告图"
              class="slide-image"
              referrerpolicy="no-referrer"
            />
            <div class="slide-text">{{ img.text }}</div>
          </div>
        </transition-group>

        <!-- 轮播图控制 -->
        <div class="slider-controls">
          <button
            @click="prevSlide"
            class="control-btn prev-btn"
            @mouseenter="hoverButton(true)"
            @mouseleave="hoverButton(false)"
          >
            ‹
          </button>
          <div class="pagination">
            <span
              v-for="(_, index) in images"
              :key="index"
              :class="['dot', { active: currentIndex === index }]"
              @click="currentIndex = index"
            ></span>
          </div>
          <button
            @click="nextSlide"
            class="control-btn next-btn"
            @mouseenter="hoverButton(true)"
            @mouseleave="hoverButton(false)"
          >
            ›
          </button>
        </div>
      </div>

      <!-- 功能按钮 -->
      <div class="action-buttons">
        <button
          class="auth-btn"
          @click="verifyIdentity"
          @mouseenter="hoverButton(true)"
          @mouseleave="hoverButton(false)"
        >
          🔒 身份验证
        </button>
      </div>
    </main>
  </div>
</template>

<script>
export default {
  name: "HomePage",
  data() {
    return {
      currentIndex: 0,
      greeting: "",
      weatherData: {
        city: "北京",
        temperature: 28,
        condition: "晴",
      },
      images: [
        {
          url: "https://picsum.photos/id/1018/1200/500", // 有效
          text: "法律知识讲堂",
        },
        {
          url: "https://picsum.photos/id/1040/1200/500", // 有效
          text: "最新法规速递",
        },
        {
          url: "https://picsum.photos/id/1052/1200/500", // 有效
          text: "在线咨询服务",
        },
      ],
      isHovering: false,
    };
  },
  mounted() {
    this.setGreeting();
  },
  methods: {
    setGreeting() {
      const hour = new Date().getHours();
      if (hour < 5) this.greeting = "夜深了，请注意休息";
      else if (hour < 12) this.greeting = "早安，法律守护者！";
      else if (hour < 18) this.greeting = "下午好，智慧的法务官！";
      else this.greeting = "晚上好，正义的伙伴！";
    },
    prevSlide() {
      this.currentIndex =
        this.currentIndex === 0
          ? this.images.length - 1
          : this.currentIndex - 1;
    },
    nextSlide() {
      this.currentIndex =
        this.currentIndex === this.images.length - 1
          ? 0
          : this.currentIndex + 1;
    },
    // 在身份验证按钮的点击事件中修改为：
    verifyIdentity() {
      this.$router.push("/auth");
    },
    hoverButton(state) {
      this.isHovering = state;
    },
  },
};
</script>

<style scoped>
.home-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  padding: 32px;
  box-sizing: border-box;
}

.weather-card {
  position: fixed;
  right: 32px;
  top: 32px;
  background: rgba(255, 255, 255, 0.95);
  padding: 24px;
  border-radius: 0.9375rem;
  box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(0.625rem);
  transition: all 0.3s ease;
}

.weather-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.icon {
  font-size: 40px;
}

.weather-info h3 {
  margin: 0;
  color: #2c3e50;
  font-size: 20px;
}

.weather-info p {
  margin: 8px 0 0;
  color: #7f8c8d;
}

.main-content {
  max-width: 75rem;
  margin: 0 auto;
  /* padding-top: 64px; */
}

.greeting {
  text-align: center;
  font-size: 30px;
  color: #34495e;
  margin-bottom: 48px;
  text-shadow: 0.125rem 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
}

.slider-container {
  position: relative;
  border-radius: 1.25rem;
  overflow: hidden;
  box-shadow: 0 0.9375rem 3.125rem rgba(0, 0, 0, 0.2);
  margin: 32px 0;
  height: 500px;
}
.slider-wrapper {
  height: 100%;
}

.slide-item {
  position: absolute;
  width: 100%;
  height: 500px;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
}

.slide-item.active {
  opacity: 1;
  z-index: 1;
}

.slide-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.slide-text {
  position: absolute;
  bottom: 20%;
  left: 50%;
  transform: translateX(-50%);
  color: white;
  font-size: 2.5rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  background: rgba(0, 0, 0, 0.3);
  padding: 1rem 2.5rem;
  border-radius: 10px;
  z-index: 2;
  white-space: nowrap;
  backdrop-filter: blur(5px);
}

.slide-fade-enter-active,
.slide-fade-leave-active {
  transition: all 1s ease;
}
.slide-fade-enter {
  transform: translateX(100%);
  opacity: 0;
}
.slide-fade-leave-to {
  transform: translateX(-100%);
  opacity: 0;
}

.slider-controls {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 24px;
  z-index: 999;
}

.control-btn {
  width: 3.125rem;
  height: 3.125rem;
  border: none;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  font-size: 24px;
  color: #2c3e50;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 0.25rem 0.9375rem rgba(0, 0, 0, 0.2);
}

.control-btn:hover {
  background: white;
  transform: scale(1.1);
}

.pagination {
  display: flex;
  gap: 12.8px;
}

.dot {
  width: 0.75rem;
  height: 0.75rem;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
}

.dot.active {
  background: white;
  transform: scale(1.4);
}

.action-buttons {
  text-align: center;
  margin-top: 48px;
}

.auth-btn {
  padding: 19.2px 40px;
  font-size: 19.2px;
  background: linear-gradient(45deg, #4a90e2, #63b8ff);
  color: white;
  border: none;
  border-radius: 1.875rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 0.5rem 1.25rem rgba(74, 144, 226, 0.3);
}

.auth-btn:hover {
  transform: translateY(-0.1875rem);
  box-shadow: 0 0.75rem 1.5625rem rgba(74, 144, 226, 0.4);
}

/* 动画效果 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.slide-up-enter-active {
  transition: all 0.8s ease;
}
.slide-up-enter {
  opacity: 0;
  transform: translateY(1.875rem);
}
</style>
